<template>
	<view class="ImageView" v-if="ImageShow">
		<swiper class="swiper" :current="current" vertical :style="styles" @catchtouchmove="catchSwipeMove"
			@change="swiperChange">
			<swiper-item v-for="item,index in imageList" :key="item.Murl">
				<view class="imageBox" @click="showclick">
					<!-- <uni-icons style="margin-right: 20rpx;" type="compose" size="30"
						color="#fff"></uni-icons> -->
					<!-- <uni-transition mode-class="slide-right"  :show="true">
						<view @click.stop="()=>{}" class="edit" v-if="type!='none'&&item.Mtype=='image'"
							style="width: 26%;padding: 20rpx 0; display: flex;justify-content: flex-end;z-index: 9999;background-color: #D1100B;
							margin-top: 100rpx;border-top-left-radius: 60rpx;border-bottom-left-radius: 60rpx;">
							<view @click.stop="()=>{}" style="padding-right:60rpx">
								<image style="width:50rpx;height:50rpx" @click.stop="toEdit(item,index)" src="/static/edit.png"
									mode="aspectFit"> </image>
							</view>
						</view>
					</uni-transition> -->
					<view class="edit" v-if="type!='none'&&item.Mtype=='image'" style="">
						<view @click.stop="()=>{}" style="padding-right:60rpx">
							<image style="width:50rpx;height:50rpx" @click.stop="toEdit(item,index)"
								src="/static/editRed.png" mode="aspectFit"> </image>
						</view>
					</view>
					<view class="top" style="">
						<image v-if="item.Mtype=='image'" class="image" :src="item.Murl" mode="aspectFit">
						</image>
						<view class="play" v-if="item.Mtype=='video'">
							<image @click.stop="toVideoView(item.Murl)" src="/static/play.png" mode=""></image>
						</view>
						<!-- <video v-if="item.Mtype=='video'" :src="item.Murl"></video> -->
						<!-- <MyVideo v-if="item.Mtype=='video'" :videoUrl="item.Murl"></MyVideo> -->
					</view>
					<view v-if="isShow" class="bottom" @touchmove.passive.stop="catchContentMove">
						<view v-for="(item,index) in PropData" :key="index">
							{{item.ControlName}}: {{item.DefaultValue}}
						</view>
						<view>
							描述 : {{Content}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MyVideo from './videoIframe.vue'
	import {
		fileToBlob,
		base64ToPath,
		pathToBase64
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		components: {
			MyVideo,
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			parentObj: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				styles: {
					// position: 'fixed',
					// width: '100vw',
					// height: '100vh',
					// backgroundColor: 'rgba(0,0,0,0.8)',
					// top: 0,
					// left: 0,
					// zIndex: 9999
				},
				Content: '',
				current: 0,
				ImageShow: false,
				styles: {
					position: 'fixed',
					width: '100vw',
					height: '100vh',
					backgroundColor: 'rgba(0,0,0,0.8)',
					top: 0,
					left: 0,
					zIndex: 9999
				},
				ImageUrl: '',
				imageList: [],
				PropData: [],
				type: '',
				newEditObj: null,
				query: {}
			};
		},
		methods: {
			toVideoView(url) {
				uni.navigateTo({
					url: '/pages/video/video?src=' + url
				})
			},
			getImageInfo(imgSrc) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
							console.log('获取图片成功', image)
						},
						fail: (err) => {
							reject(err);
							console.log('获取图片失败', err)
						}
					});
				});
			},
			// 编辑图片
			toEdit(item, index) {
				// console.log('编辑图片', item.Murl, item, this.imageList, index, this.type, this.parentObj)
				let newUploadImgList = []
				let newImageListIndex = null
				// return
				this.$emit('close', true)
				uni.showTabBar()
				this.$emit('setEdit', this.newEditObj)
				if (this.type === 'upload') {
					newUploadImgList = JSON.parse(uni.getStorageSync('uploadImgList')).content
					newImageListIndex = newUploadImgList.findIndex(v => v.name == item.name)
					// console.log('编辑图片获取到当前所有图片数组编辑额是哪一个', newUploadImgList, newImageListIndex)
				} else if (this.type === 'local') {
					newImageListIndex = index
				} else {
					// console.log('匹配到编辑页面的图片编辑了', )
					newImageListIndex = index
				}
				// let obj = {
				// 	ProjectId: this.query.ProjectId,
				// 	TaskId: this.query.TaskId
				// }
				// console.log(obj);

				uni.getImageInfo({
					src: item.Murl,
				}).then(async resJson => {
					let [err, image] = resJson
					let canvasStyle = await this.caclCanvasStyle(image.height, image.width);
					uni.navigateTo({
						url: '/pages/EditImage/EditImage?picture=' + item.Murl + '&type=' + this.type +
							'&index=' +
							newImageListIndex + '&style=' + JSON.stringify(canvasStyle)

					})
					// this.canvasStyle = await this.caclCanvasStyle(image.height, image.width);
					// this.$refs.graffiti.Init()
					// this.picture = query.picture
					// 	this.oldPicture = query.picture

				})

				setTimeout(() => {
					this.ImageShow = false
				}, 500)


			},
			async caclCanvasStyle(imgHeight, imgWidth) {
				let systemInfo = await uni.getSystemInfoSync();
				let width = 0,
					height = 0;
				if (imgWidth >= imgHeight) {
					if (systemInfo.windowWidth <= imgWidth) {
						width = systemInfo.windowWidth;
						height = (systemInfo.windowWidth / imgWidth) * imgHeight;
					} else {
						width = imgWidth;
						height = imgHeight;
					}
				} else {
					if (systemInfo.windowHeight * 0.7 <= imgHeight) {
						height = systemInfo.windowHeight * 0.7;
						width = (systemInfo.windowHeight * 0.7 / imgHeight) * imgWidth;
						if (systemInfo.windowWidth <= width) {
							width = systemInfo.windowWidth * 0.8;
							height = (systemInfo.windowWidth * 0.8 / width) * height;
						}
					} else {
						width = imgWidth;
						height = imgHeight;
					}
				}

				return {
					width: width.toFixed(0) + "px",
					height: height.toFixed(0) + "px",
					w: parseInt(width.toFixed(0)),
					h: parseInt(height.toFixed(0)),
					style: `width:${width.toFixed(0)}px;height:${height.toFixed(0)}px;`
				}
			},
			swiperChange(event) {
				// console.log('轮播图改变了', event, this.imageList, this.parentObj.formArr, this.parentObj.editObj, )
				let index = event.detail.current
				let newImageListObj = this.imageList[index]
				console.log('过滤出来的', newImageListObj)
				let newImageListArr = this.parentObj.formArr.filter(function(item) {
					return item.Id == newImageListObj.Id // 过滤出来数组中>=5的元素
				})
				let newImageListIndex = this.parentObj.formArr.findIndex(item => item.Id == newImageListObj.Id)
				// console.log('获取最新过滤好的当前轮播图片数组和当前范围的下标', newImageListArr, newImageListIndex)

				let newEditObj = JSON.stringify({
					content: newImageListArr[0].imglist,
					vix: newImageListIndex
				})
				// console.log('获取即将要存储到缓存的', JSON.parse(newEditObj))
				this.newEditObj = newEditObj
				uni.setStorageSync('uploadImgList', newEditObj)

			},
			catchSwipeMove(e) {
				// 阻止默认行为
				e.preventDefault();
			},
			// 捕获滚动区域的滑动事件
			catchContentMove(e) {
				e.stopPropagation();
			},
			showclick() {
				this.$emit('close', true)
				this.ImageShow = false
				uni.showTabBar()
				// 删除编辑图片缓存
				if (this.type == 'local') uni.removeStorageSync('localImgList')
				else if (this.type == 'upload') uni.removeStorageSync('uploadImgList')
			},
			// open(arr, remark, current, PropData, type) {
			open(obj, query) {
				console.log(obj, query, '222222222222');
				// console.log('imageView最终接受到的图片列表数据', obj)
				this.newEditObj = null
				// 显示图片编辑
				this.ImageShow = true
				uni.hideTabBar()
				this.imageList = obj.imageList ? obj.imageList : [] //上传好的图片数组
				this.Content = obj.Content ? obj.Content : "" //描述
				this.current = obj.current ? obj.current : 0 //下标第几张图片
				this.PropData = obj.PropData ? obj.PropData : [] //表单数据
				this.type = obj.type //存储类型
				this.query = query ? query.data : {}
			},
			changeImgList(arr) {
				console.log('触发了图片变更', arr);
				// console.log(this.imageList[this.current], arr[this.current].Murl);
				this.imageList = arr
				this.ImageShow = true
				this.$set(this.imageList[this.current], 'Murl', arr[this.current].Murl)
			}
		}
	}
</script>

<style lang="scss">
	.ImageView {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;

	}

	.imageBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		position: relative;

		.edit {
			position: fixed;
			z-index: 99;
			top: 30px;
			/* #ifdef H5 */
			top: 35px;
			/* #endif */
			right: 0;
			margin-top: 80rpx;
			width: 24%;
			padding: 20rpx 0;
			display: flex;
			justify-content: flex-end;
			z-index: 9999;
			background-color: #ffffff;
			border-top-left-radius: 30px;
			border-bottom-left-radius: 30px;
			// border-top-right-radius: 30px;
			// border-bottom-right-radius: 30px;
		}

		.top {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;

			.play {
				width: 236rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bottom {
			box-sizing: border-box;
			height: 300rpx;
			padding: 20rpx;
			color: #fff;
			position: absolute;
			bottom: 0px;
			left: 0;
			background-color: rgba(0, 0, 0, 0.1);
			width: 100%;
			overflow-y: auto;
		}
	}
</style>